import React, {Component} from 'react';
import './App.css';

class State {
    constructor() {
        this.todos = []
    }

    addTodo(todoText) {
        this.todos.push({"text": todoText})
    }
}

class Header extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return <h3>TODO</h3>
    }
}

class TodoInput extends Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
    }

    // 这样写的方法都是静态方法???
    // 所有的 this 都是 undefined
    handleChange(event) {

    }

    handleSubmit(event) {
        // 这里想要修改 props 的格式，如何获取引用???需要将
        // state 提升到最外部分???
        this.props.state.addTodo(event.target.value)
        event.preventDefault()
    }

    render() {
        return (
            <form action="javascript:void(0);" onSubmit={this.handleSubmit}>
                <label>
                    new:
                    <input onChange={this.handleChange} />
                </label>
                <input type="submit" value="添加" />
            </form>
        )
    }
}

class Footer extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return <hr/>
    }
}

class Items extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        let items = [];
        this.props.state.todos.forEach((todo) => {
            items.push(<Item text={todo.text} />)
        })
        return (
            <div>{items}</div>
        )
    }
}

class Item extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div>{this.props.text}</div>
        )
    }
}

class App extends Component {
    constructor(props) {
        super(props);
        this.state = new State()
    }

    render() {
        return (
            <div className="App">
                <Header state={this.state}/>
                <TodoInput state={this.state}/>
                <Items state={this.state}/>
                <Footer state={this.state}/>
            </div>
        );
    }
}

export default App;
